import { defineView } from "@/routers/tools.mjs";

/**
 * @type {DefineView}
 */
const tbView = defineView({
  template: /* HTML */ html`
    <div ng-init="qty=1;cost=2" class="btstrap container">
      对齐
      <div class="container">
        <p class="text-left">左对齐</p>
        <p class="text-center">居中对齐</p>
        <p class="text-right">右对齐</p>
      </div>
      <p>
        <abbr title="HyperText Markup Language" class="initialism">html</abbr>
        is the best thing since sliced bread.
      </p>
      <hr />
      带有条纹的表格(table-striped), 相邻行的表格颜色不一致
      <div>
        <table
          class="table table-striped table-bordered table-hover table-responsive"
        >
          <tr ng-repeat="tr in [1,2,3]">
            <td ng-repeat="td in [1,2,3]">单元格{{ td * tr }}</td>
          </tr>
        </table>
      </div>

      <hr />
      <blockquote>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer
          posuere erat a ante.
        </p>
      </blockquote>

      <hr />
      <div class="table-responsive">
        <!-- 响应式表格：table-responsive 需要在table外面包裹一层 -->
        <table class="table table-bordered">
          <tr ng-repeat="tr in ['active','info','success']" class="{{ tr }}">
            <td ng-repeat="td in [1,2,3,5,6,7,8,9]">
              2023年，未来可期，生活、事业、红红火火，努力提升自己。凡是向内求
            </td>
          </tr>
        </table>
      </div>
      11
      <hr />
      <!-- END ALL -->
    </div>
  `,
});

export default tbView;
